import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { ElDialog, ElButton, ElIcon } from 'element-plus'
import { Plus,Delete } from '@element-plus/icons-vue'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import TableRender from '@/render/TableRender'
import type { VxeColumnSlotTypes } from 'vxe-table'
import type { LongInsuranceCaseListDto, ReportCaseResultDto } from '@/api/insurance/period/types'
@Component
export class InterfaceConfigurationPop extends TableRender {
    @Prop() show!: boolean

    showDialog = false

     @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }
    @Emit('change')
     handleChange() {
         return 
     }
    
    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }
    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '原始字段',
        },
        {
            field: 'companyName',
            title: '原始字段名称',
        },
        {
            field: 'companyName',
            title: '转换后字段名',
        },
        {
            title: '操作',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams<LongInsuranceCaseListDto<ReportCaseResultDto>>) => {
                    return (
                        <div class="text-blue-light-100 mr-2 cursor-pointer" >
                            <ElIcon size="16" color="#565868"><Delete /></ElIcon>
                        </div>
                    )
                }
            }
        },
    ]

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '123',
            width: '800px',
            theme: 'light',
            show: true,
            gutter: 0,
            items: {
                payMoney: {
                    name: '规则名称',
                    element: 'input',
                    required: true,
                    span:12
                },
                code: {
                    name: '密钥',
                    element: 'input',
                    required: true,
                    span:12
                },
                rangeType: {
                    name: '适用范围',
                    element: 'select',
                    options: [
                        { label: '1', value: 1 },
                        { label: '2', value: 2 }
                    ],
                    span:12,
                    required: true,
                },
                authorizeCode: {
                    name: '授权码',
                    element: 'input',
                    required: true,
                    span:12
                },
                address: {
                    name: '数据推送地址',
                    element: 'input',
                    required: true,
                    span: 12,
                    params: {
                        append: () => {
                            return (
                                <div class="text-blue-light-400 text-base cursor-pointer">校验</div>
                            )
                        }
                    }
                }
            },
            complete: async () => {
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {
                // initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }
    
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }
    
    created() {
        this.basicForm = renderForm(this.basicFormConfig)
    }
    render() { 
        return (
            <>
                <ElDialog
                    width={'800px'}
                    v-model={this.showDialog}
                    title="新建接口配置"
                    closeOnClickModal={true}
                    destroyOnClose={true}
                >
                    <div>
                        {this.basicForm.element()}
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-gray-light-600 text-lg">映射关系设置</div>
                        <ElButton color="#EBEFFE">
                            <ElIcon size="16" color="#3E5FF5"><Plus /></ElIcon>
                            <span class="text-[#3E5FF5]">添加映射关系</span>
                        </ElButton>
                    </div>
                    <div>
                        {this.renderTable()}
                    </div>
                    <div class="w-full items-center justify-center flex mt-24">
                        <ElButton >取消</ElButton>
                        <ElButton type="primary">确定</ElButton>
                    </div>
                </ElDialog>
                {/* { this.basicForm.element() } */}
            </>
        )
    }
}

export default toNative<{}, {}>(InterfaceConfigurationPop)